<template>
    <div class="cashier-process">
        <div class="search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content" style="text-align:center">
                        <v-search @transferParam="getParam"></v-search>

                    </div>
                </el-col>
                <el-col :span="10">

                </el-col>
            </el-row>
        </div>
        <div class="process step-layout">
            <steps :current="current" type="line" :show-footer="false" class="line-none">
                <step description="选择商品">
                    <keep-alive>
                        <v-goodswf
                                :param="param"
                                v-if="currentIsGood"
                                @transferGoodItem="getGoodItem"
                        >
                        </v-goodswf>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handleNext1">下一步</button>
                        <button class="button is-info c-def" @click="handleGo">去结算</button>
                    </div>
                </step>
                <step description="选择会员">
                    <keep-alive>
                        <v-memberwf

                                :param="param"
                                v-if="currentIsMember"
                                @transferMember="getMembera"
                                :dblNextClick="handleNext2"
                        >
                        </v-memberwf>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handlePrev">上一步</button>
                        <button class="button is-info c-def" @click="handleNext2">下一步</button>
                        <button class="button is-info c-def" @click="handleGo">去结算</button>
                    </div>
                </step>
                <step description="选择员工">
                    <keep-alive>
                        <v-userwf
                                :param="param"
                                v-if="currentIsEmployee"
                                @transferEmployee="getEmployee"
                        >
                        </v-userwf>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handlePrev">上一步</button>
                        <button class="button is-info c-def" @click="handleNext3">下一步</button>
                        <button class="button is-info c-def" @click="handleGo">去结算</button>
                    </div>
                </step>
                <step description="结算清单">
                    <v-list
                            :goodItem="goodItem"
                            :member="member"
                            :employee="employee"
                            :item="item"
                            @changeGood="changeGood"
                            @changeMember="changeMember"
                            @changeEmployee="changeEmployee"
                    >
                    </v-list>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handlePrev">上一步</button>
                    </div>
                </step>
            </steps>
        </div>
    </div>

</template>

<script>
    import vSearch from '.././Search.vue';
    import vGoodswf from './GoodsWf.vue';
    import vMemberwf from './MemberWf.vue';
    import vUserwf from './UserWf.vue';
    import vEmployeeWaterfall from './EmployeeWaterfall.vue';
    import vList from  './List.vue';         //结算界面
    export default {
        name: 'keepailvepercentage-false',
        data() {
            return {
                current: 0,
                goodItem:'',
                member:'',
                employee: '',
                goodData: '',
                memberData:'',
                employeeData: '',
                item: '',
                param: '',
            };
        },
        components: {
            vSearch, vGoodswf, vMemberwf, vUserwf, vList
        },
        created: function () {
            this.$$("#content").scrollTop(0)
            this.$$(window).resize();
            if (this.$route.query.item) {
                this.item = this.$route.query.item
                console.log(this.item.entries[0].id)
//                this.current = 3;
            }

        },
        mounted:function () {
            this.$$("#content").scrollTop(0)
            this.$$(window).resize();
            this.goodItem='';
            this.member ='';
            this.employee ='';
            this.goodData ='';
            this.memberData ='';
            this.employeeData ='';

        },
        methods: {
            getParam(res){
                this.param = res;
                this.$$("#content").scrollTop(0)
            },
            handleGo(){
                if (this.goodData.length) {
                    this.current = 3;

                }else{
                    this.$message({
                        showClose: true,
                        message: '请选择商品',
                        type: 'error'
                    });
                }

                console.log(this.goodData)
                console.log(this.memberData)
                console.log(this.employeeData)
                this.goodItem=this.goodData||[];
                this.member=this.memberData||{};
                this.employee=this.employeeData||[];
                this.$$(window).resize();
                this.$$("#content").scrollTop(0);
            },

            handleNext1() {

                this.param = '';
                console.log(this.goodData)
                if (this.goodData.length) {
                    this.current <= 2 && this.current++;
                    this.goodItem=this.goodData;
                    this.$$(window).resize();
                    this.$$("#content").scrollTop(0)
                }else{
                    this.$message({
                        showClose: true,
                        message: '请选择商品',
                        type: 'error'
                    });
                }
            },
            handleNext2() {

                this.param = '';
                this.current <= 2 && this.current++;
                this.member=this.memberData||{};
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            handleNext3() {

                this.param = '';
                this.current <= 2 && this.current++;
                this.employee=this.employeeData||[];
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            handlePrev() {
                this.param = '';
                this.current >= 0 && this.current--;
                this.goodItem=this.goodData||[];
                this.member=this.memberData||{};
                this.employee=this.employeeData||[];
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            getGoodItem(res){
                console.log(res);
                this.goodData = res;
                this.goodData.forEach(item => {
                   item.quantity=1;
                });
            },
            getEmployee(res){
                console.log(res);
                this.employeeData = res;
            },
            getMembera(res){
                console.log(res);
                this.memberData = res;
            },
            changeGood(){
                this.current = 0;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            changeMember(){
                this.current = 1;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            changeEmployee(){
                this.current = 2;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            }
        },
        computed: {
            currentIsEmployee: function () {
                if (this.current == 2) {
                    return true;
                }
            },
            currentIsMember: function () {
                if (this.current == 1) {
                    return true;
                }
            },
            currentIsGood: function () {
                if (this.current == 0) {
                    return true;
                }
            }
        }

    }
</script>

<style scoped>

    .step-fixed {
        width: 100%;
        position: fixed;
        bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #000;
        opacity: 0.6;
        z-index: 3;
        margin-left: -20px;

    }

    .step-fixed button {
        margin-left: 30px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 25px;
        height:35px;
    }

    .line .step-item .step-description {
        position: absolute;
        width: 100px;
        left: -15px !important;
        padding-top: 10px !important;
    }

    .step-header {
        padding-left: 40px !important;
    }

    .step-panel {
        padding-top: 20px;
    }


    .line-none {
        border-bottom: none;
    }
    .process{
        padding: 70px 0 0 0;
    }
    .c-def{
        cursor: default;
    }

</style>
